<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="加载数据" @click="fn()">
    <table border="1">
        <caption>商品列表</caption>
        <tr>
            <th>商品名</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
        <tr v-for="item in items">
            <th>{{item.name}}</th>
            <th>{{item.price}}</th>
            <th>{{item.count}}</th>
        </tr>

    </table>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let arr=[{name:"小米",price:800,count:50},
            {name: "华为",price: 1000,count: 60},
            {name: "苹果",price: 2000,count: 80}]
        let v=new Vue({
            el:"div",
            data:{
                items:[]
            },
            methods:{
                fn:function () {
                    v.items=arr
                }
            }
        })
    </script>
</div>
</body>
</html>